<template>
	<!-- 符石 -->
	<view id="rune" style="height: 100%;">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<!-- <view id="mask"></view> -->
		<!-- <view id="mask" :is="maskComp"></view> -->
		<view class="body">
			<uv-tabs @click="onTabClick" :list="tabList" lineWidth="60" lineColor="#f56c6c" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold'
			}" :inactiveStyle="{
				color: '#606266'
			}" itemStyle="padding-left: 0px;color: #007aff; padding-right: 0px; height: 68rpx;"></uv-tabs>

			<view class="data_area">
				<!-- <template v-if="curTab == 'rune'"> -->
				<template v-if="curTab === $t('rune.tab.runewords')">
					<c-runewords ref="child"></c-runewords>
				</template>
				<template v-else>
					<c-runes></c-runes>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * uv-tabs https://ext.dcloud.net.cn/plugin?id=12346
	 * 		修改了uni_modules_uv-tabs-components-uv-tabs-uv-tabs.vue文件，增加了动态类item_is_actived
	 * */
	import $utils_ from "@/utils/common.js";
	import cRunes from "./runes.vue";
	import cRunewords from "./runewords.vue";
	// import {
	// 	EventBus
	// } from "@/utils/event-bus.js";
	export default {
		components: {
			cRunes,
			cRunewords
		},
		data() {
			return {
				// maskComp: "div",
				tabList: [{
					name: this.$t("rune.tab.runewords"),
				}, {
					name: this.$t("rune.tab.runes"),
				}],
				curTab: this.$t("rune.tab.runewords"),
			}
		},
		// 每一个页面都放，切换语言后进那个页面再加载
		onReady() {
			const _this = this;
			// 设置tabbar文字
			_this.$t('global.tabbar').forEach((el, i) => {
				uni.setTabBarItem({
					index: i,
					text: el
				});
			});
		},
		onLoad() {},
		onReachBottom() {
			// console.log("rune/index,onReachBottom");
			// console.log(this.$refs,this.$refs.child);
			if (this.curTab === this.$t('rune.tab.runewords')) {

				this.$refs.child.onReachBottom_();
			}
		},
		created() {
			// EventBus.$on("changeMask", function(mask) {
			// 	console.log(mask);
			// 	this.$nextTick(() => {
			// 		this.maskComp = mask;
			// 	});
			// });
		},
		mounted() {},
		methods: {
			onTabClick(item) {
				// console.log(this.curTab, item);
				if (this.curTab != item.name) {
					this.curTab = item.name;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	$uvtabHeight: 74rpx; // 68(tab height) + 6(line height)

	#rune {
		// background-color: yellow;
		// background-color: pink;

		background-color: rgb(28, 28, 28);

		.status_bar {
			// background-color: blue;
			position: fixed;
			top: 0;
			height: var(--status-bar-height);
			width: 100%;

			// background-color: #f5f5f5; // 防透视.data_area
			background-color: rgb(28, 28, 28);
			z-index: 99;
		}

		.body {
			// background-color: pink;
			height: calc(100% - var(--status-bar-height));
			width: 100%;
			// display: flex;
			// flex-direction: column;

			.uv-tabs {
				position: fixed;
				top: var(--status-bar-height);
				width: 100%;
				// background-color: #f5f5f5; // 防透视.data_area
				background-color: rgb(28, 28, 28);

				z-index: 99;

			}

			.data_area {
				margin-top: calc(var(--status-bar-height) + #{$uvtabHeight});
				// margin-bottom: var(--window-bottom);
				// position: relative;
				// z-index: -1;

				// background-color: yellow;

				// 避免子元素撑起它
				flex: 1;
				min-height: 0;
				overflow: visible;

			}
		}
	}
</style>